<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-02 09:19:33
 * @FilePath: /src/components/Card/index.vue
 * @LastEditTime: 2021-07-02 10:26:07
 * @LastEditors: luojiajun
-->
<template>
    <div class="sh-card">
        <div
            class="sh-card-item float-left"
            :class="[`item-${i + 1}`]"
            v-for="(item, i) in inputValue"
            :key="i"
        >
            <div class="sh-card-item__title">{{ item.label }}</div>
            <div class="sh-card-item__content">
                <span class="sh-card-item__content--label">{{ historyTitle }}</span>
                <span class="sh-card-item__content--value">{{ numberFormat(item.total) }}</span>
            </div>
            <div class="sh-card-item__content">
                <span class="sh-card-item__content--label">{{ newTitle }}</span>
                <span class="sh-card-item__content--value">{{ numberFormat(item.value) }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { thousandFormat } from "@/utils/zkComm"

export default {
    name: "Card",
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        value: {
            type: Array,
            default: () => {
                return [];
            }
        },
        historyTitle: {
            type: String,
            default: "累计:"
        },
        newTitle: {
            type: String,
            default: "今日新增:"
        },
        numberCut: {
            type: Boolean,
            default: true
        },
        numberCutSymbol: {
            type: String,
            default: ","
        },
        
    },
    computed: {
        inputValue: {
            get() {
                return this.value;
            },
            set(newValue) {
                this.$emit("change", newValue);
            }
        }
    },
    methods: {
        numberFormat(number) {
            if (!this.numberCut) return number
            return thousandFormat(number, this.numberCutSymbol)
        }
    }
};
</script>

<style lang="scss" scoped>
$one: #2a8ef5;
$two: #2ccbed;
$three: #8593f2;

.sh-card {
    overflow: hidden;

    &-item {
        width: 240px;
        height: 128px;
        color: #fff;
        padding: 0 20px;
        border-radius: 4px;

        &:not(:last-child) {
            margin-right: 30px;
        }

        &.item-1 {
            background: $one;
        }
        &.item-2 {
            background: $two;
        }
        &.item-3 {
            background: $three;
        }

        &__title {
            border-bottom: 1px solid #ffffff;
            padding: 15px 0 14px 0;
            margin-bottom: 10px;
        }

        &__content {
            display: flex;
            align-items: center;

            &--label {
                font-size: 16px;
                margin-right: 4px;
            }

            &--value {
                font-size: 22px;
                font-weight: bold;
            }
        }
    }
}
</style>
